<template>
	<view class="list ss-flex-row ss-row-between ss-col-top" @click="itemClick">
		<image src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407231645245368.png" mode="aspectFit" class="img"></image>
		<view class="right ss-m-l-10 ss-m-t-20">
			<view class="title single-line">minicat猫咪低压洗护（丽晶国国际大酒店10层vip总统房）</view>
			<view class="rate ss-m-t-10 ss-flex-row ss-row-left ss-col-center">
				<image src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407231703254673.png" mode="aspectFit" class="selected ss-m-r-8"></image>
				<image src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407231703254673.png" mode="aspectFit" class="selected ss-m-r-8"></image>
				<image src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407231703254673.png" mode="aspectFit" class="selected ss-m-r-8"></image>
				<image src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407231703254673.png" mode="aspectFit" class="selected ss-m-r-8"></image>
				<image src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407231703253058.png" mode="aspectFit" class="selected ss-m-r-8"></image>
				<view class="recommend ss-m-l-10 color_red">4.0推荐</view>
				<view class="ss-m-l-10 num">108条 ¥93/人</view>
			</view>
			<view class="address ss-flex-row ss-row-between ss-col-center ss-m-t-10">
				<view class="addr">钱江世纪城 宠物店</view>
				<view class="dis color_3d">1.7km</view>
			</view>
			<view class="consume_collect ss-flex-row ss-row-left ss-col-center ss-m-t-20 ">
				<view class="consume ss-m-r-16 ss-p-10">消费人数7千+</view>
				<view class="collect ss-m-r-16 ss-p-10">收藏200+</view>
			</view>
			<view class="ss-m-b-28">
				<view class="label ss-flex-row ss-row-left ss-col-center ss-m-t-20">
					<view class="circle"></view>
					<view class="desc">“洗澡过程可全程观看”</view>
				</view>
				<view class="group ss-flex-row ss-row-left ss-col-center ss-m-t-20">
					<image src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407231811157814.png"  mode="aspectFit" class="buy"></image>
					<view class="taocan ss-m-l-10"><text class="color_red">¥39.9</text> 狗狗精洗一次 不限体重 全程观看</view>
				</view>
				<view class="group ss-flex-row ss-row-left ss-col-center ss-m-t-20">
					<image src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/creator/202407231811157814.png"  mode="aspectFit" class="buy"></image>
					<view class="taocan ss-m-l-10"><text class="color_red">¥ ¥29.9</text> 狗狗普洗一次 不限体重 全程观看</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {onMounted,reactive,ref} from 'vue';
	
	import sheep from '@/sheep';
	
	const props = defineProps({
		data:{
			type:Object,
			 default:{},
		}
	})
	
	const emits = defineEmits(["itemClick"])
	
	const itemClick=()=>{
		console.log("itemClick")
		emits("itemClick",222);
	}
	
	onMounted(()=>{
		
	})
	
</script>

<style lang="scss" scoped>

.list{
		width:100%;
		font-family: Source Han Sans;
		.img{
			width:180rpx;
			height:180rpx;
		}
		.right{
			width:calc(100vw - 190rpx);
			font-family: Source Han Sans;
			border-bottom: 1rpx solid #D8D8D8;;
			.title{
				width:100%;
				font-size: 32rpx;
				font-weight: 600;
				color: #3D3D3D;
			}
			.rate{
				height:30rpx;
				.selected{
					width:30rpx;
					height:30rpx;
					.recommend{
						font-weight: 500;
						letter-spacing: 0rpx;
					}
					.num{
						font-size: 24px;
						color: rgba(0, 0, 0, 0.8);
					}
				}
			}
			.address{
				height:30rpx;
				.addr{
					height:30rpx;
					font-size: 24rpx;
					color: #95989e;
				}
				.dis{
					height:30rpx;
					font-size: 20rpx;
				}
			}
			.consume_collect{
				height:30rpx;
				font-size: 20rpx;
				letter-spacing: 1rpx;
				.consume{
					color:#FDAD00;
					border-radius: 10rpx;
					background: #FDF1D7;
					
				}
				.collect{
					color:#F75A5A;
					border-radius: 10rpx;
					background: #FADFDF;
				}
			}
			.label{
				height:30rpx;
				.circle{
					height:30rpx;
					width: 30rpx;
					background: #DFDAFB;
					border-radius: 15rpx;;
				}
				.desc{
					font-size: 26rpx;
					color: #3D3D3D;
				}
			}
			.group{
				height:30rpx;
				.buy{
					width:30rpx;
					height:30rpx;
				}
				.taocan{
					font-size: 26rpx;
				}
			}
			.devision{
				
			}
		}
	}
	
	.color_red{
		color:#E82D2D
	}
	
	.color_3d{
		color:#3D3D3D;
	}
	
</style>
